<!--签收订单列详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head" :class="{add:todolist.BillState == 'P10'}">
      <!-- <div class="dt-head-fix"> -->
        <template v-if="todolist.BillState == 'P10'">
          <detail-header 
            :status="'请安排收货'"
            :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist"></detail-header>
        </template>
        <!--tab-->
        <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" 
               defaultColor="#333333"
               active-color="#77babd"
               :line-width='2'>
            <tab-item selected 
              @on-item-click="tab=true">商品信息</tab-item>
            <!-- <tab-item 
              @on-item-click="tab=false">订单反馈</tab-item> -->
          </tab>
        </div>
      <!-- </div> -->
    </div>
    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <!-- 快速下单的详情start -->
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>
      <!-- 快速下单的详情end -->
      <div class="detail-goods-list" v-for="item in tododetail">
        <div class="displayflex list-goods-warp">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <p>共订货{{item.SupplierPoQty}}{{item.SupplierUnit}}  合计:<em class="def-color">￥{{item.Amount | fmoney}}</em></p>
          </div>
        </div>
        <div :class="{signDone:(todolist.BillState !== 'P10')}">
          <div class="detail-num-ope cf">
            <div class="f-l cf cho-num">
              <em class="f-l label">签收数量</em>
              <div class="num-sele f-l">
                <x-number :min="0" fillable 
                          :max="item.SupplierPoQty"
                          v-model="item.ConQty"></x-number>
              </div>
            </div>
            <div class="btn f-r" @click="sign">签收</div>
            <span class="f-r gray sure-num dis-none">签收数量：{{item.ConQty}}</span>
          </div>
          <!-- v-if="todolist.BillState=='P07'" -->
          <div class="tag-state dis-none"><img src="~images/icon/tag_yqs.png"></div>
        </div>
      </div>
      
      <div class="detail-goods-list mt30">
        <p class="detail-mark ft17" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{todolist.Memo}}</i></p>
        <div class="detail-num" v-if="tododetail.length==0">
          <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{todolist.DetailSum | fmoney}}</span>
        </div>
      </div>

      <div class="detail-bottom" v-if="todolist.BillState=='P10'">
        <!-- <div class="btn">预约</div> -->
        <div class="btn" @click="next" >确认收货</div>
      </div>
    </div>
    <!-- <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template> -->
  </div>
</template>

<script>
import detailHeader from '@/components/core/header/detail_header.vue';
// import feedBack from '@/components/share/billfb/billfb.vue';
import voiceMsg from '@/components/share/voiceMsg/voicemsg.vue';
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name:'signDetail',
  components: {
    detailHeader,
    // feedBack,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      value:0,
      tab:true,
      tododetail:[],
      Feedback:[],
      fdLength:'',
      todolist:'',
    }
  },
  computed:{
    guid(){
      return this.$route.query.id;
    }
  },
  created(){
    this.getDate();
  },
  methods: {
    //获取详情
    getDate(){
      var self = this;
      var query = {
        Guid: this.guid,
      };
      this.Ajax.post('SearchOrderDetailGuid', query).then(function(resp) {
        var result = resp.Datas;
        result.forEach(function(item){
          if(!item.PurchaserPoQty){
            item.PurchaserPoQty = item.ConQty;
          }
        });
        self.tododetail = result;
      });
      this.Ajax.post('SearchOrderGuidNew', query).then(function(resp) {
        self.todolist = resp.Data;
        if(self.todolist.Picture){
          self.itemsImg=JSON.parse(self.todolist.Picture);
        }
        if(self.todolist.Voice){
          self.itemsVoice =JSON.parse(self.todolist.Voice);
        }
      });
    },
    sign(e){
      var tar = $(e.target);
      tar.siblings(".cho-num").hide();
      tar.siblings(".sure-num").show();
      tar.hide();
      tar.parent().siblings(".tag-state").show();
    },
    next(){
      sessionStorage.goodsitem =JSON.stringify(this.tododetail);
      sessionStorage.item = JSON.stringify(this.todolist);
      this.$router.push({
        path:'/order/signDetail2',
        query:{
          id:this.guid
        }
      })
    }
  }
}
</script>